<template>
  <div class="account-payment">
    <el-form-item :label="`预${labelText}核销`">
      <div class="pay-table">
        <div>
          <div v-for="item in tableHead">{{ item }}</div>
        </div>
        <el-empty v-if="!tableData.length" :image-size="80" /><el-scrollbar max-height="150px">
          <div class="table-row" v-for="item in tableData" :key="item.slipId">
            <div>{{ item.slipCode }}</div>
            <div>￥{{ item.availableAmount }}</div>
            <div>
              <el-form-item :prop="item.slipCode">
                <el-input
                  placeholder="请输入"
                  @blur="formData.deductionRecordList[item.slipCode] = item.currentDeductionAmount"
                  v-model="item.currentDeductionAmount"
                  style="width: 150px"
                />
              </el-form-item>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </el-form-item>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";

const props = defineProps(["tableDataParam", "formDataParam", "formLabelVal", "tableHeadParam"]);
const labelText = computed(() => (props.formLabelVal == "payment" ? "付款" : "收款"));
const $emit = defineEmits(["update:tableDataParam", "update:formDataParam"]);
const tableData = computed({
  get() {
    return props.tableDataParam;
  },
  set(val) {
    $emit("update:tableDataParam", val);
  }
});
const formData = computed({
  get() {
    return props.formDataParam;
  },
  set(val) {
    $emit("update:formDataParam", val);
  }
});
const tableHead = computed(() => {
  return props.tableHeadParam;
});
</script>

<style scoped lang="scss">
@import "./index.scss";
:deep(.el-form-item) {
  display: block;
}
</style>
